<template>
    <nav-bar>
      <div slot="left" class="tubiao" @click="backClick">
        <img src="~assets/img/common/back.svg" >
      </div>
      <div slot="center">
        <ul>
          <li v-for="(item, index) in titles" :class="{active: currentIndex == index}" @click="itemlinClick(index)">{{item}}</li>
        </ul>
      </div>
    </nav-bar>
</template>

<script>
    import NavBar from "components/common/navbar/NavBar";
    export default {
        name: "DetailNavBar",
        components: {
          NavBar
        },
        data() {
          return {
            titles: ['商品','参数','评论','推荐'],
            currentIndex:0
          }
        },
        methods:{
          itemlinClick(index) {
            this.currentIndex = index
          },
          backClick(){
            this.$router.back()
          }
        }
    }
</script>

<style scoped>
  ul {
    display: flex;
    font-size: 13px;
  }
  li {
    list-style: none;
    flex: 1;
  }
  .active {
    color: var(--color-high-text);
  }
  .tubiao {
    margin-top: 5px;
  }
</style>
